<div class="devui-demo-container" dAnchorBox dAnchorHashSupport [view]="{ top: 180, bottom: 0 }">
  <d-demo-nav [navItems]="navItems"></d-demo-nav>
  <div class="devui-demo-example" [dAnchor]="'basic-usage'">
    <div class="devui-demo-title">{{ 'components.auto-complete.basicDemo.title' | translate }}</div>
    <div class="devui-demo-text">{{ 'components.auto-complete.basicDemo.description' | translate }}</div>
    <d-codebox id="components-auto-basic" [sourceData]="AutoCompleteDemoBasic">
      <d-auto-complete-demo-basic demo></d-auto-complete-demo-basic>
    </d-codebox>
  </div>
  <div class="devui-demo-example" [dAnchor]="'auto-object'">
    <div class="devui-demo-title">{{ 'components.auto-complete.objectDemo.title' | translate }}</div>
    <div class="devui-demo-text">{{ 'components.auto-complete.objectDemo.description' | translate }}</div>
    <d-codebox id="components-auto-object" [sourceData]="AutoCompleteDemoObject">
      <d-auto-complete-demo-object demo></d-auto-complete-demo-object>
    </d-codebox>
  </div>
  <div class="devui-demo-example" [dAnchor]="'auto-custom'">
    <div class="devui-demo-title">{{ 'components.auto-complete.customDemo.title' | translate }}</div>
    <div class="devui-demo-text">{{ 'components.auto-complete.customDemo.description' | translate }}</div>
    <d-codebox id="components-auto-custom" [sourceData]="AutoCompleteDemoCustom">
      <d-auto-complete-demo-custom demo></d-auto-complete-demo-custom>
    </d-codebox>
  </div>
  <div class="devui-demo-example" [dAnchor]="'auto-disable'">
    <div class="devui-demo-title">{{ 'components.auto-complete.disabledDemo.title' | translate }}</div>
    <div class="devui-demo-text">{{ 'components.auto-complete.disabledDemo.description' | translate }}</div>
    <d-codebox id="components-auto-disable" [sourceData]="AutoCompleteDemoDisable">
      <d-auto-complete-demo-disable demo></d-auto-complete-demo-disable>
    </d-codebox>
  </div>
  <div class="devui-demo-example" [dAnchor]="'auto-latest'">
    <div class="devui-demo-title">{{ 'components.auto-complete.latestDemo.title' | translate }}</div>
    <div class="devui-demo-text">{{ 'components.auto-complete.latestDemo.description' | translate }}</div>
    <d-codebox id="components-auto-latest" [sourceData]="AutoCompleteDemoLatest">
      <d-auto-complete-demo-latest demo></d-auto-complete-demo-latest>
    </d-codebox>
  </div>
  <div class="devui-demo-example" [dAnchor]="'auto-lazy-load'">
    <div class="devui-demo-title">{{ 'components.auto-complete.lazyLoadDemo.title' | translate }}</div>
    <div class="devui-demo-text">{{ 'components.auto-complete.lazyLoadDemo.description' | translate }}</div>
    <d-codebox id="components-auto-lazy-load" [sourceData]="AutoCompleteDemoLazyLoad">
      <d-auto-complete-demo-lazy-load demo></d-auto-complete-demo-lazy-load>
    </d-codebox>
  </div>
</div>
